<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>材料管理</el-breadcrumb-item>
      <el-breadcrumb-item>材料列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-button type="primary" @click="goEditMaterials(null)" style="margin-bottom: 28px;">添加材料</el-button>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input v-model="parameter.phone" placeholder="请输入材料编号"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="parameter.storeName" placeholder="请输入材料名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="checked">查询</el-button>
          <el-button type="info" @click="resrt">重置</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            type="index"
            width="50">
          </el-table-column>
        <el-table-column
          label="材料编号" >
          <template slot-scope="scope">
            <el-avatar :src="scope.row.user.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          label="材料名称">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{ scope.row.user.username }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="材料描述">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{ scope.row.user.username }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间" >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{scope.row.user.createdTime | dateFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="views(scope.row)">
              查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="views(scope.row)">
              下载
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="goEditMaterials(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="parameter.currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="parameter.pageSize"
          layout="sizes, prev, pager, next"
          :total="totle">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getMerchantList } from '@/api/groupManagementApi/shopNews'
export default {
  data () {
    return {
      tableData: [],
      activeIndex: 1,
      totle: 1,
      parameter: {
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页记录数
        phone: null,
        storeName: null
      }
    }
  },
  mounted () {
    this.userList()
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.parameter.pageSize = val
      this.userList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.parameter.currentPage = val
      this.userList()
    },
    // 获得用户列表数据
    async userList () {
      // getMerchantList(this.parameter).then(res => {
      //   console.log(res)
      //   this.tableData = res.data.data
      //   this.totle = res.data.totle
      //   console.log(res.data.totle)
      // })
    },
    goEditMaterials (type) {
      this.$router.push('/add')
    },
    checked () {
      this.userList()
    },
    resrt () {
      this.parameter.phone = null
      this.parameter.storeName = null
      this.userList()
    },
    closeDialog () {
      this.userList()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
